<template>
 <el-row :gutter="16">
  <el-col :span="8">
   <div class="statistic-card">
    <el-statistic :value="98500">
     <template #title>
      <div style="display: inline-flex; align-items: center">
       关注人数
       <el-tooltip
        effect="dark"
        content="Number of users who logged into the product in one day"
        placement="top"
       >
        <el-icon style="margin-left: 4px" :size="12">
         <Warning />
        </el-icon>
       </el-tooltip>
      </div>
     </template>
    </el-statistic>
    <div class="statistic-footer">
     <div class="footer-item">
      <span>than yesterday</span>
      <span class="green">
       24%
       <el-icon>
        <CaretTop />
       </el-icon>
      </span>
     </div>
    </div>
   </div>
  </el-col>
  <el-col :span="8">
   <div class="statistic-card">
    <el-statistic :value="693700">
     <template #title>
      <div style="display: inline-flex; align-items: center">
       活动数量
       <el-tooltip
        effect="dark"
        content="Number of users who logged into the product in one month"
        placement="top"
       >
        <el-icon style="margin-left: 4px" :size="12">
         <Warning />
        </el-icon>
       </el-tooltip>
      </div>
     </template>
    </el-statistic>
    <div class="statistic-footer">
     <div class="footer-item">
      <span>month on month</span>
      <span class="red">
       12%
       <el-icon>
        <CaretBottom />
       </el-icon>
      </span>
     </div>
    </div>
   </div>
  </el-col>
  <el-col :span="8">
   <div class="statistic-card">
    <el-statistic :value="72000" title="New transactions today">
     <template #title>
      <div style="display: inline-flex; align-items: center">参与人次</div>
     </template>
    </el-statistic>
    <div class="statistic-footer">
     <div class="footer-item">
      <span>than yesterday</span>
      <span class="green">
       16%
       <el-icon>
        <CaretTop />
       </el-icon>
      </span>
     </div>
     <div class="footer-item">
      <el-icon :size="14">
       <ArrowRight />
      </el-icon>
     </div>
    </div>
   </div>
  </el-col>
 </el-row>
 <div class="main" style="width: 100%; height: 500px; margin-top: 30px"></div>
</template>

<script setup>
import {
 ArrowRight,
 CaretBottom,
 CaretTop,
 Warning
} from '@element-plus/icons-vue'
import { onMounted } from 'vue'
import * as echarts from 'echarts'

onMounted(() => {
 var chartDom = document.querySelector('.main')
 var myChart = echarts.init(chartDom)
 var option

 option = {
  xAxis: {
   type: 'category',
   data: ['烧烤', '篮球赛', '轰趴', '包车', '新生见面会']
  },
  yAxis: {
   type: 'value'
  },
  series: [
   {
    data: [120, 200, 150, 80, 70],
    type: 'bar'
   }
  ]
 }

 option && myChart.setOption(option)
})
</script>

<style scoped>
:global(h2#card-usage ~ .example .example-showcase) {
 background-color: var(--el-fill-color) !important;
}

.el-statistic {
 --el-statistic-content-font-size: 28px;
}

.statistic-card {
 height: 100%;
 padding: 20px;
 border-radius: 4px;
 background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 font-size: 12px;
 color: var(--el-text-color-regular);
 margin-top: 16px;
}

.statistic-footer .footer-item {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.statistic-footer .footer-item span:last-child {
 display: inline-flex;
 align-items: center;
 margin-left: 4px;
}

.green {
 color: var(--el-color-success);
}

.red {
 color: var(--el-color-error);
}
</style>
